@mixin app-top-main-bottom($topHeight, $bottomHeight) {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	overflow: hidden;

	.header{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: $topHeight;
		z-index: 10000;
	}
	.section{
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: $topHeight;
		padding-bottom: $bottomHeight;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;

		.section-container{
			width: 100%;
			height: 100%;
			overflow-y: auto;
			overflow-x: hidden;
		}
	}
	.footer{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: $bottomHeight;
		z-index: 10000;
	}
}

/* 使用transform偏移方式达到居中 */
@mixin positionCenterByTransfrom() {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

@mixin group-column-3($height, $firstColumnWidth, $lastColumnWidth) {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: $height;

	.group-column{
		position: relative;
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		height: $height;
		line-height: $height;
		text-align: left;
		@include text-ellipsis();
		@include border-1px(#dcdcdc);
	}

	.group-column:first-child{
		-webkit-box-flex: 0;
		    -ms-flex-positive: 0;
		        flex-grow: 0;
		-ms-flex-preferred-size: $firstColumnWidth;
		    flex-basis: $firstColumnWidth;
		min-width: $firstColumnWidth;
		text-align: center;
	}
	.group-column:last-child{
		-webkit-box-flex: 0;
		    -ms-flex-positive: 0;
		        flex-grow: 0;
		-ms-flex-preferred-size: $lastColumnWidth;
		    flex-basis: $lastColumnWidth;
		min-width: $lastColumnWidth;
		text-align:center;
	}
}

@mixin text-ellipsis() {
	overflow:hidden;
    -o-text-overflow:ellipsis;
       text-overflow:ellipsis;
    white-space:nowrap;
}

@mixin border-1px($color) {
	&:after{
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		border-bottom: 1px solid $color;
		content: ' ';
	}
}


